<template>
  <div class="container">
    <div v-if="!form.name" class="content">
      <el-form :model="form" label-width="auto" style="max-width: 600px">
        <el-form-item label="门派名称">
          <el-input v-model="form.name" />
        </el-form-item>
        <el-form-item label="掌门名称">
          <el-input v-model="form.masterName" />
        </el-form-item>
        <el-button type="primary" @click="onSubmit">新建门派</el-button>
      </el-form>
    </div>
    <div v-else>
      <div class="fl">{{ lastTime }}</div>
      <!-- <div class="tc">{{ form.name }}</div> -->
      <div class="main">
        <!-- <canvas width="512" height="512"></canvas> -->
        <LeftBoard class="flexable"> 
          <UserCard> </UserCard>
          <FullMessage></FullMessage>
        </LeftBoard>
        <div>
          <MapMin class="MapMin"></MapMin>
        </div>
        <RightBoard class="rightBoard"></RightBoard>
        <!-- <SocketConnection></SocketConnection> -->
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { socket } from '~~/components/socket';
import { v4 as uuidv4 } from 'uuid';
const dayjs = useDayjs()
const time = useTime()
definePageMeta({
  layout: 'main',
});

const form = reactive({
  name: '血刀门',
  region: '',
  date1: '',
  date2: '',
  delivery: false,
  type: [],
  resource: '',
  desc: '',
  masterName: "",
  mapWidth: 11,
})

onMounted(() => {
  const auth = useAuth()

})

let lastTime = ref<string>(dayjs().format('YYYY-MM-DD HH:mm:ss'))

async function onSubmit() {
  document.dispatchEvent(new Event("gameStart"))
}

time.render((a) => {
  lastTime.value = dayjs().format('YYYY-MM-DD HH:mm:ss')

})
</script>
<style lang="scss" >
.content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: 10%;
}

.MapMin {
  padding: 0 16px;
}

.row {
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
}

.col {
  border: 1px solid #000;
  box-sizing: border-box;
}

.main {
  display: flex;
  height: calc(100vh - 20px);

  &>div {
    width: 100%;
  }
}

.tc {
  text-align: center;
  width: 100%
}

.console {
  height: 300px;
  max-width: 100vw;
  word-wrap: break-word;
  word-break: break-all;
  overflow-y: auto;
  border: 1px solid #000;
  margin: 10px 0;
}

.flexable {
  display: flex;
  flex-direction: column;
}

.rightBoard {
  margin-right: 8px;
}
</style>